﻿<div class="ui-widget-content">
    <h3>Draggable - Restringindo o movimento</h3>
    <p>
        O draggable também pode ter seu movimento restringido de algumas formas, tais como apenas 
        <span class="draggable_horizontal">horizontalmente</span>, apenas
        <span class="draggable_vertical">verticalmente</span>, apenas
        <span class="draggable_container">dentro</span> de um elemento específico ou apenas
        <span class="draggable_parent">dentro do elemento pai</span>.
        <br />
        <span class="draggable_free">Além disso também é possível colocar <span class="draggable_parent">um draggable dentro</span> de outro</span>
        ou então <span class="draggable_grid">restringir o dragging a uma grade</span> ou iniciar o dragging após algum 
        <span class="draggable_tempo">tempo</span> ou apenas a partir de certa
        <span class="draggable_distancia">distância</span>, além de ser possível
        <span class="draggable_combinado">combinar-se</span> estes efeitos.
    </p>
    <div>
        <p>Para fazer isso, usamos:</p>
        <p><span class="codigo draggable_horizontal clicavel-h">$("#meu_draggable").draggable({axis: "x"}); // Movimenta apenas horizontalmente.</span></p>
        <p><span class="codigo draggable_vertical clicavel-v">$("#meu_draggable").draggable({axis: "y"}); // Movimenta apenas verticalmente.</span></p>
        <p><span class="codigo"><span class="draggable_parent clicavel">$("#meu_draggable").draggable({containment: "parent"});</span> // Movimenta apenas dentro do elemento pai.</span></p>
        <p><span class="codigo draggable_container clicavel">$("#meu_draggable").draggable({containment: "#minha_area"}); // Movimenta apenas dentro do elemento definido no seletor jQuery dado.</span></p>
        <p><span class="codigo draggable_grid clicavel">$("#meu_draggable").draggable({grid: [30, 15]}); // Movimenta apenas em uma grid de 30x15.</span></p>
        <p><span class="codigo draggable_tempo clicavel">$("#meu_draggable").draggable({delay: 1000}); // Movimenta apenas após 1 segundo (1000 ms).</span></p>
        <p><span class="codigo draggable_distancia clicavel">$("#meu_draggable").draggable({distance: 30}); // Inicia o movimento apenas após 30 pixels.</span></p>
        <p><span class="codigo draggable_combinado clicavel">$("#meu_draggable").draggable({containment: "#minha_area", delay: 1000, grid: [20, 20]}); // Combinando efeitos.</span></p>
    </div>
    <script type="text/javascript">
        inicializador.draggableInit = function() {
            $(".draggable_horizontal").draggable({axis: "x"});
            $(".draggable_vertical").draggable({axis: "y"});
            $(".draggable_parent").draggable({containment: "parent"});
            $(".draggable_free").draggable();
            $(".draggable_container").draggable({containment: "#slide_draggable_restringindo"});
            $(".draggable_grid").draggable({grid: [30, 15]});
            $(".draggable_tempo").draggable({delay: 1000});
            $(".draggable_distancia").draggable({distance: 30});
            $(".draggable_combinado").draggable({containment: "#slide_draggable_restringindo", delay: 1000, grid: [20, 20]});
        };
    </script>
</div>